<template>
  <div>
<el-card>
<el-row :gutter="20">
  <el-col :span="10"><el-button>共有{{total}}条记录</el-button></el-col>
  <el-col :span="14">
  <el-button type='danger' @click="getExcelData()">普通Excel导出</el-button>
  <el-button  type='info'>复杂Excel表头导出</el-button>
  <el-button type='success'>Excel导出</el-button>
  <el-button type='primary' @click="add">新增员工</el-button>
  </el-col>
</el-row>

</el-card>

 <Table 
    class="Table"
   :tableData='tableData'
   :width='width'
   :tableColum='tableColum'
    :multipleSelection='multipleSelection'
   @rowoperation='rowoperation'
   @handleSelectionChange='handleSelectionChange'
   @switchChang='switchChang'

   ></Table>
   <!-- 分页 -->

   <Page 
         class="page"
         :total='total'
         :currentPage='queryInfo.page'
         :pageSize='queryInfo.size'
         @handleSizeChange='handleSizeChange'
         @handleCurrentChange='handleCurrentChange'
   ></Page>
   
<!-- 分配角色 -->

<el-dialog
 class="my-dialog-name"
  title="分配角色"
  :visible.sync="RoledialogVisible"
  width="50%"
  >
  <!-- <span>12+++++++++++++++</span> -->
<!-- <pre>{{checkVal}}</pre> -->
  <el-form>
  <el-form-item>
   <el-checkbox-group v-model="roleIds" @change='boxchange'>
    <el-checkbox  v-for="item in checkVal" :label="item.id" :key="item.id"  >{{item.name}}</el-checkbox>
    
  </el-checkbox-group>
  </el-form-item>
  </el-form>
  <span slot="footer">
    <el-button @click="RoledialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure">确 定</el-button>
  </span>
</el-dialog>
<!-- <Dialog
:show.sync="RoledialogVisible"
 title='分配角色'
 :searchData='roleData'
 :searchForm='roleForm'

></Dialog> -->


<!-- add -->
<Dialog
@cnacel='Addcnacel'
@confirm='Addconfirm'
:searchData="authgroupForm"
:searchForm="searchForm"
:rules="rules"
:show.sync="AdddialogVisible"
 title='添加员工'
 
></Dialog>

  </div>
</template>

<script>
import {User,UserMsg,role,roleDetail,DelUser,AddUser,assignRoles} from '@/api/http'
import Table from '@/components/global/table'
import Page from '@/components/global/page'
import Dialog from '@/components/global/Dialog'
import Blob from "@/Excel/Blob";
const { export_json_to_excel } = require("@/Excel/Export2Excel");
export default {
components:{Table,Page,Dialog},
data() {
    return {
      rules: {
        username: [
          { required: true, message: "请输入授权组名称", trigger: "blur" }
        ],
         mobile: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
         formOfEmployment: [{ required: true, message: "请输入密码", trigger: "blur" }],
         workNumber: [
          { required: true, message: "请输入管理名称", trigger: "blur" }
        ],
         departmentName:[
          { required: true, message: "请选择管理协议", trigger: "blur" }
        ],
         timeOfEntry:  [{ required: true, message: "请输入管理端口", trigger: "blur" }],
          correctionTime:[
          { required: true, message: "请选择管理协议", trigger: "blur" }
        ],
      },

      tableData:[],
      tableColum:[{
        prop:'username',
        lable:'姓名',

      },
      {
        prop:'staffPhoto',
        lable:'头像',
        type:'img'

      },
      {
        prop:'mobile',
        lable:'手机号',
      

      },
       {
        prop:'workNumber',
        lable:'工号',
      

      },
       {
        prop:'departmentName',
        lable:'应聘形式',
      

      },
       {
        prop:'departmentName',
        lable:'部门',
      

      },
       {
        prop:'correctionTime',
        lable:'入职时间',
      

      },
      {
  lable:'状态',
  type:'switch',
  prop:'state'
 },
 {
  lable:'操作',
  type:'opt',
  size:'mini',
  operations:[{
    label:'查看',
    method:'check',
    type:'primary'
  },
  {
    label:'转正',
    method:'formal',
    type:'primary'

  },
  {
    label:'调岗',
    method:'transfer',
    type:'primary'
  },
  {
    label:'离职',
    method:'quit',
    type:'primary'
  },
   {
    label:'角色',
    method:'role',
    type:'primary'
  }, 
  {
    label:'删除',
    method:'del',
    type:'primary'
  },
]
 },



      ],
      width:'100%',
      multipleSelection:[],
      queryInfo:{
        page:'1',
        size:'10',
      },
      user:[],
      total:0,
      UserMsg:[],
      roleIds:[],
      RoledialogVisible:false,

        checkVal:[],
        AdddialogVisible:false,
      // 添加user
       authgroupForm: {
        username: "",
        mobile:"",
        formOfEmployment: "",
        workNumber:"",
        departmentName: "",
        timeOfEntry: "",
        correctionTime: ""
      },
     

      // 添加user
       searchForm: [
        {
          type: "Input",
          label: "姓名",
          prop: "username",
          width: "120px",
          // disabled: true,
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "手机号",
          prop: "mobile",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Data",
          label: "入职时间",
          prop: "timeOfEntry",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "工号",
          prop: "workNumber",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Select",
          label: "聘用形式",
          prop: "formOfEmployment",
          width: "120px",
          props: [{label:'正式',value:1},{label:'非正式',value:2},],
          change: row => {
            this.selectVal(row);
          },
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "部门",
          prop: "departmentName",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Data",
          label: "转正时间",
          prop: "correctionTime",
          width: "120px",
          isFormItemShow: true
        }
      ],
      EditId:'',
      EditRole:[],
     
    }

  },
  methods: {
    // 操作按钮
  async  rowoperation(row,method){
      console.log('父组件',row,method)
      if(method==='check'){
          const res = await UserMsg(row.id)
        console.log('获取员工信息',res.data.data)
         this.UserMsg = res.data.data 
        // this.$store.dispatch('getUserMsg',row.id)
        // const res = await UserMsg(row.id)
        // console.log(res.data.data)
        //  this.UserMsg = res.data.data 
        //  
        // this.getMsg()
        this.$router.push({path:'/user/detail', query:{id:row.id}})
      }
      // 角色
      this.EditId = row.id
       if(method==='role'){
        console.log('role')
         this.getRole()
         
       
        // const res = await roleDetail(row.id)
        // console.log('roleDetail',row.id,res)
        const {data:res} = await UserMsg(row.id)
        console.log('获取员工信息',res.data)
         this.UserMsg = res.data
        //  this.roleIds = res.data.roleIds
         const arr =[]
         res.data.roleIds.forEach(item => {
          console.log('item',item)
          arr.push(item)

         });
         console.log(arr)
           this.roleIds = arr
           this.RoledialogVisible = true
        //  console.log('this.roleIds', this.roleIds)
        
       }
       if(method==='del'){
        console.log('del')
       const confirmRes = await this.$confirm(
        "此操作将永久删除该商品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmRes !== "confirm") {
        return this.$message.info("已取消删除");
      }

      const res =  await DelUser(row.id)
      console.log('DelUser',res);
      if (res.data.code!=10000) {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
       this.getUser()
       }

    },
    // 多选框
      handleSelectionChange(val) {
       console.log('父组件复选框',val)
      },
      switchChang(val){
        console.log('父组件switch',val)
      },
      async   getUser(){
        const res = await User(this.queryInfo)
        console.log(res)
        console.log(res.data.data.rows)
        console.log(res.data.data.total)
        this.tableData = res.data.data.rows
        this.total = res.data.data.total
        if(res.status===200){
          return
          // this.$message.success('获取员工列表成功')
          
        }else{
       this.$message.error('获取员工列表失败')
          }
      },
      handleSizeChange(val){
        console.log('父',val)
        // const size = this.queryInfo.size -0
        this.queryInfo.size = val
        this.getUser()
      },
      handleCurrentChange(val){
          console.log('父',val)
           this.queryInfo.page = val
           this.getUser()

      },

      // 获取员工信息
   async   getMsg(){
        // const res = await UserMsg(row.id)
        // console.log('获取员工信息',res.data.data)
        //  this.UserMsg = res.data.data 
        //  this.$router.push({path:'/user/detail', query:{id:row.id}})
      },
      // 获取角色
     async getRole(){
        const res = await role()
        console.log('Role',res.data.data.rows)
        this.checkVal = res.data.data.rows
         console.log('this.checkVal',this.checkVal)
      },
      add(){
        console.log('add')
        this.AdddialogVisible = true
        
      },
      // 显示添加弹框
      Addcnacel(){
        this.AdddialogVisible = false
        console.log('Addcnacel')
      },
      // 添加确认按钮
     async Addconfirm(){
     const res =await AddUser(this.authgroupForm)
      console.log('AddUser',res)
       this.AdddialogVisible = false
        console.log('Addconfirm')
        if(res.data.code===10000){
          this.$message.success('添加员工成功')
            this.getUser()
        }else{
           this.$message.error('添加员工失败')
        }
      },
      // Excel导出
      getExcelData(){
        //导出的方法
        this.handleSizeChange(this.total)
      //  this.queryInfo.size = this.total
       console.log(this.queryInfo.size)
       this.queryInfo.page ='1'
       require.ensure([], () => {
      // 设置Excel的表格第一行的标题
      const tHeader = ['姓名','手机号', '工号','应聘形式','部门','入职时间'];
     //  'date', 'struct1', 'struct2'对象的属性
      const filterVal = [ 'username', 'mobile', 'workNumber','departmentName','departmentName','correctionTime'];
      
      // 数据集
      const list = this.tableData;  
      const data = this.formatJson(filterVal, list);
      // excel名称可自定义
      const excelName = "员工信息表";
      export_json_to_excel(tHeader, data, excelName);
    });
  },
  //格式化json
  formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  
},
// 多选框boxchange
boxchange(val){
console.log(val)
this.EditRole = val
},
 async sure(){
   this.RoledialogVisible = false
  //  this.EditId  this.EditRole
  const {data:res} = await assignRoles ({id:this.EditId,roleIds:this.EditRole})
  console.log('sure',res)
  if(res.code===10000){
    this.$message.success(res.message)
    
  }else{
    this.$message.error('系统超时')
  }
},
  },
created() {
   this.getUser()
  //  this.getRole()
},
}
</script>

<style lang="less" scoped>


.el-card{
  height: 150px;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.Table{
  margin-bottom: 20px;
}
.page{
  text-align: center;
}
 .my-dialog-name{ 
    .el-dialog__header{ 
      text-align: left;
      background-color: #1482f0;
      border-bottom: 1px solid #e8eaec;
      .el-dialog__body {
      }
      .el-dialog__footer {
        text-align: center;
      }
       .el-dialog__title,.el-dialog__headerbtn i{
      color: white;
    }

    }
  }
  .el-input{
    width: 300px;
  }

</style>